<!--博客-->
<template>
  <div id="blogManage">
    <!-- 站内导航 -->
    <div class="TopNav">
      <TopNav></TopNav>
    </div>
    <!-- 菜单 -->
    <div class="LeftMenu">
      <LeftMenu></LeftMenu>
    </div>
    <!-- 右菜单 -->
    <div class="RightMenu">
      <RightMenu></RightMenu>
    </div>
    <!-- 写散记 -->
    <div class="fromBox">
      <h4 style="color: green;margin-left: 5%;"><span>写散记&ensp;</span>
        <span :style="formReturnStyle"> {{ formReturn }}</span></h4>
      <el-form class="logForm" ref="logForm">
        <el-input prefix-icon="el-icon-collection-tag " placeholder="请务必输入类型 [20]" v-model="formData.type"
                  maxlength="20" show-word-limit clearable class="logInput"></el-input>
        <el-input prefix-icon="el-icon-s-flag" placeholder="请务必输入标题 [100]" v-model="formData.title"
                  maxlength="100" show-word-limit clearable class="logInput"></el-input>
        <el-input type="textarea" placeholder="请务必输入简介[300]" v-model="formData.blurb"
                  :rows="4" maxlength="300" show-word-limit clearable class="logTextarea"></el-input>
        <el-input type="textarea" placeholder="请务必输入内容[16,000,000]" v-model="formData.content"
                  :rows="12" maxlength="60000" show-word-limit clearable class="logTextarea"></el-input>
        <el-input type="textarea" placeholder="请输入拓展信息[1,000]" v-model="formData.extend"
                  :rows="4" maxlength="1000" show-word-limit clearable class="logTextarea"></el-input>
        <el-input type="textarea" placeholder="请输入备注[300]" v-model="formData.remark"
                  :rows="4" maxlength="300" show-word-limit clearable class="logTextarea"></el-input>
        <el-radio-group v-model="formData.states" style="margin-top:1.5%;">
          <el-radio :label=3 checked>发布</el-radio>
          <el-radio :label=0>草稿</el-radio>
        </el-radio-group>
        <div class="formOperate">
          <button style="background: slategrey" @click="writeClear()">清 空</button>
          <div class="divNone"></div>
          <button style="background: mediumseagreen" @click="writeSubmit()" ref="writeSubmit">提 交</button>
          <div class="divNone"></div>
          <button style="background: dodgerblue" @click="writeEdit()" ref="writeEdit" hidden>修 改</button>
        </div>
      </el-form>
    </div>
    <!-- 散记表 -->
    <div class="logManagePage">
      <el-table stripe style="width:100%;cursor:pointer;" :data=logData.content>
        <el-table-column label="序号" type="index" style="width: 15%;">
          <div style="color:green;text-align:center;" slot-scope="scope" @click="detail(scope.row.id)"
               @contextmenu.prevent='edit(scope.row)'>{{ scope.row.autoNum }}
          </div>
        </el-table-column>
        <el-table-column label="状态" type="index" prop="states" style="width: 10%;" show-overflow-tooltip>
          <div style="" slot-scope="scope" @click="detail(scope.row.id)" @contextmenu.prevent='edit(scope.row)'>
            {{ scope.row.states === 3 ? "发布" : "待发" }}
          </div>
        </el-table-column>
        <el-table-column label="类型" type="index" prop="type" style="width: 10%;">
          <div style="" slot-scope="scope" @click="detail(scope.row.id)" @contextmenu.prevent='edit(scope.row)'>
            {{ scope.row.type }}
          </div>
        </el-table-column>
        <el-table-column label="标题" prop="title" style="width: 40%;" show-overflow-tooltip>
          <div style="color:blue;" slot-scope="scope" :title="scope.row.content" @click="detail(scope.row.id)"
               @contextmenu.prevent='edit(scope.row)'>{{ scope.row.title }}
          </div>
        </el-table-column>
        <el-table-column label="简介" prop="blurb" style="width: 10%;" show-overflow-tooltip>
          <div style="color:darkcyan;" slot-scope="scope" :title="scope.row.extend" @click="detail(scope.row.id)"
               @contextmenu.prevent='edit(scope.row)'> {{ scope.row.blurb }}
          </div>
        </el-table-column>
        <el-table-column label="作者" type="index" prop="author" style="width: 10%;" show-overflow-tooltip>
          <div style="" slot-scope="scope" @click="detail(scope.row.id)">{{ scope.row.author }}</div>
        </el-table-column>
        <el-table-column label="日期" prop="createTime" style="width: 10%;">
          <div style="" slot-scope="scope" @click="detail(scope.row.id)">{{ scope.row.createTime }}</div>
        </el-table-column>
        <el-table-column label="字数" type="index" prop="wordage" style="width: 10%;" show-overflow-tooltip>
          <div style="text-align:center;" slot-scope="scope" @click="detail(scope.row.id)">{{ scope.row.wordage }}
          </div>
        </el-table-column>
        <el-table-column label="星星" type="index" prop="starNum" style="width: 10%;" show-overflow-tooltip>
          <div style="text-align:center;" slot-scope="scope" @click="detail(scope.row.id)">{{ scope.row.starNum }}
          </div>
        </el-table-column>
      </el-table>
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-size="pageSize"
                     :total="logData.totalElements" :current-page="pageNum" :page-sizes="[10, 15, 18, 24, 30]"
                     layout="total, sizes, prev, pager, next, jumper" style="text-align: center;background: skyblue">
      </el-pagination>
    </div>
    <!-- 页脚 -->
    <div class="Footer">
      <Footer></Footer>
    </div>
  </div>
</template>

<script>
import LeftMenu from '../../../components/head/LeftMenu.vue'
import TopNav from '../../../components/head/TopNav.vue'
import MidMenu from "../../../components/head/MidMenu";
import Footer from '../../../components/foot/Footer.vue'
import blog from '../../../apis/blog'
import RightMenu from "../../../components/head/RightMenu";
import CodeWebJs from "../../../assets/js/CodeWeb";
import '../../../assets/css/CodeWeb.css';

export default {
  name: 'blogManage',
  components: {LeftMenu, RightMenu, MidMenu, TopNav, Footer},

  data() {
    return {
      landUser: localStorage.getItem("landUser"),
      landPwd: localStorage.getItem("landPwd"),
      searchTip: '散记搜索',
      formReturn: "",
      formReturnStyle: "color: coral;",
      formData: {},
      formDataInit: {
        type: '编程',
        title: '',
        blurb: '',
        content: '',
        extend: '',
        remark: '',
        states: 3,
        author: ''
      },
      inputValue: '',
      pageNum: 1, //初始页
      pageSize: 18, //    每页的数据
      logData: '',
    }
  },
  created() {
    if (this.landUser === null || this.landPwd !== CodeWebJs.getDateToKey(new Date(), "month")) {
      alert("请先登录！")
      window.open(window.location.protocol + "//" + window.location.hostname + ":" + window.location.port + '/#/user', '_self')
    }
    this.formData = JSON.parse(JSON.stringify(this.formDataInit))
    this.page();
  },
  methods: {
    writeClear() {
      console.log(this.formData, this.formDataInit)
      if (this.formData.title === '' && this.formData.blurb === '' && this.formData.content === '' && this.formData.extend === '' && this.formData.remark === '') {
        this.$message.info('无需清空内容')
        return;
      }
      this.$confirm("确认清空填写吗？", "提示", {
        iconClass: "el-icon-question blue",//自定义图标样式
        showClose: true,//是否显示右上角关闭按钮
        type: "warning",//提示类型  success/info/warning/error
      }).then(() => {
        this.formData = JSON.parse(JSON.stringify(this.formDataInit))
        this.$message.success('清空完成')
      }).catch((err) => {
        this.$message.info('取消清空')
      });

    },
    writeSubmit() {
      this.add();
      /*//弹窗提示
      this.$confirm("确认提交散记吗？", "提示", {
        iconClass: "el-icon-question green",//自定义图标样式
        showClose: true,//是否显示右上角关闭按钮
        type: "success",//提示类型  success/info/warning/error
      }).then(() => {
        this.add();
      }).catch((err) => {
        this.$message.info('取消提交')
      });*/
    },
    writeEdit() {
      blog.edit(this.formData)
        .then((res) => {
          console.log(res);
          if (res.status === 200 && res.data.finish) {
            this.formReturnStyle = "color: green;";
            this.formReturn = "散记已修改!";
            this.$message.success(this.formReturn)
            this.formData = JSON.parse(JSON.stringify(this.formDataInit))
            this.$refs.writeSubmit.hidden = false;
            this.$refs.writeEdit.hidden = true;
            this.page();
          } else {
            this.formReturnStyle = "color: red;";
            this.formReturn = res.data.msg === null ? "散记修改失败" : res.data.msg;
            this.$message.error(this.formReturn)
          }
          setTimeout(() => {
            this.formReturnStyle = "color: coral;";
            this.formReturn = "";
          }, 10000);
        })
    },
    add() {
      this.formData.author = this.landUser;
      console.log(this.formData);
      if (this.formData.title === '' || this.formData.type === '' || this.formData.content === '' || this.formData.author === '') {
        if (this.formData.author === '') {
          this.formReturn = "Error: " + "登录人未获取."
        } else if (this.formData.title === '') {
          this.formReturn = "Error: " + "标题为空."
        } else if (this.formData.type === '') {
          this.formReturn = "Error: " + "类型为空."
        } else if (this.formData.blurb === '') {
          this.formReturn = "Error: " + "简介为空."
        } else if (this.formData.content === '') {
          this.formReturn = "Error: " + "内容为空."
        }
        this.$message.warning(this.formReturn)
        setTimeout(() => this.formReturn = "", 3000);
        return;
      }
      this.formData.wordage = this.formData.content.length;
      /* json格式提交： */ // http.js 中已处理
      //let formData = JSON.stringify(this.formData);
      /* formData格式提交： */
      /*let formData = new FormData();
      for (var key in this.formData) {
        formData.append(key, this.formData[key]);
      }*/
      blog.add(this.formData)
        .then((res) => {
          console.log(res);
          if (res.status === 200 && res.data.finish) {
            this.formReturnStyle = "color: green;";
            this.formReturn = "散记已保存!";
            this.$message.success(this.formReturn)
            this.formData = JSON.parse(JSON.stringify(this.formDataInit))
            this.page();
          } else {
            this.formReturnStyle = "color: red;";
            this.formReturn = res.data.msg === null ? "散记保存失败" : res.data.msg;
            this.$message.error(this.formReturn)
          }
          setTimeout(() => {
            this.formReturnStyle = "color: coral;";
            this.formReturn = "";
          }, 10000);
        })
    },
    edit(row) {
      this.$confirm("正在编辑序号为【" + row.autoNum + "】的散记，请选择编辑项目：", "提示", {
        iconClass: "el-icon-edit blue",//自定义图标样式
        confirmButtonText: "删 除",//确认按钮文字更换
        cancelButtonText: "编 辑",//取消按钮文字更换
        distinguishCancelAndClose: true,//区分取消与关闭
        //closeOnPressEscape: false,//按下 ESC 键关闭弹窗
        //closeOnClickModal: false,//点击遮罩关闭弹窗
        showClose: true,//是否显示右上角关闭按钮
        type: "info",//提示类型  success/info/warning/error
      }).then(() => {
        //删除操作（隐藏发布/彻底删除）
        this.delete(row);
      }).catch((action) => {
        //编辑操作
        if (action === 'cancel') {
          this.update(row);
        } else {
          // 关闭了弹窗
        }
      });
    },
    update(row) {
      this.$confirm("是否同步序号为【" + row.autoNum + "】的散记内容到编辑器吗？", "提示", {
        iconClass: "el-icon-edit green",//自定义图标样式
        showClose: true,//是否显示右上角关闭按钮
        type: "info",//提示类型  success/info/warning/error
      }).then(() => {
        //编辑准备
        this.formData = row;
        this.$refs.writeSubmit.hidden = true;
        this.$refs.writeEdit.hidden = false;
        this.$message.success("散记内容已同步到编辑器，可以开始修改了\/");
        //this.$notify.success("序号为【" + row.autoNum + "】的散记内容已复制到编辑器");
      }).catch((err) => {
        this.$message.info('取消编辑')
      });
    },
    delete(row) {
      //删除操作（隐藏发布/彻底删除）
      this.$confirm("正在删除序号为【" + row.autoNum + "】的散记，请选择操作类型：", "提示", {
        iconClass: "el-icon-delete red",//自定义图标样式
        confirmButtonText: "隐藏发布",//确认按钮文字更换
        cancelButtonText: "彻底删除",//取消按钮文字更换
        distinguishCancelAndClose: true,//区分取消与关闭
        type: "warning",//提示类型  success/info/warning/error
      }).then(() => {
        //隐藏发布
        row.deleteFlag = 1;
        row.states = 0;
        blog.delete(row)
          .then((res) => {
            console.log(res);
            if (res.status === 200 && res.data.finish) {
              this.$message.success('隐藏发布成功')
              this.page();
            } else {
              this.$message.error(res.data.msg === null ? "隐藏发布失败" : res.data.msg)
            }
          })
      }).catch((action) => {
        if (action === 'cancel') {
          //彻底删除
          setTimeout(() => {
            this.$confirm("请慎重考虑下！确认彻底删除吗？", "提示", {
              iconClass: "el-icon-warning red",//自定义图标样式
              showClose: true,//是否显示右上角关闭按钮
              type: "warning",//提示类型  success/info/warning/error
            }).then(() => {
              row = {id: row.id}
              blog.delete(row)
                .then((res) => {
                  console.log(res);
                  if (res.status === 200 && res.data.finish) {
                    this.$message.success('彻底删除成功')
                    this.page();
                  } else {
                    this.$message.error(res.data.msg === null ? "彻底删除失败" : res.data.msg)
                  }
                })
            }).catch((err) => {
              this.$message.info('取消彻底删除')
            });
          }, 300);
        } else {
          // 关闭了弹窗
        }
      });
    },
    handleSizeChange(size) {
      this.pageSize = size;
      this.page();
    },
    handleCurrentChange(pageNum) {
      this.pageNum = pageNum;
      this.page();
    },
    page() {
      console.log(this.pageNum);
      let data = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        pageOrders: "desc,createTime;",
      };
      blog.page(data)
        .then((res) => {
          console.log(res);
          if (res.status === 200 && res.data.content) {
            this.logData = res.data;
          } else {
            console.log(res);
          }
        })
    },
    detail(id) {
      console.log(id);
      //this.$router.push({name: 'blogDetail', params: {id: id}});
      let routeData = this.$router.resolve({name: 'blog/detail', query: {id: id}});
      window.open(routeData.href, '_blank'); //打开新标签
      // window.open(routeData.href, 'newWindow', 'top=0'); //打开新窗口
    },
  }
}
</script>

<!-- Add "scoped"  attribute to limit CSS to this component only -->
<style>
#blogManage {
  background: url("src/assets/image/starSun.jpg");
  width: 100%;
  height: 100%;
  position: fixed;
  background-size: 100% 100%;
  margin-left: -8px;
  margin-top: -8px;
  opacity: 0.95;
}

.LeftMenu {
}

.RightMenu {
  float: right;
}

.TopNav {
}

.fromBox {
  width: 48%;
  height: 80%;
  margin-top: 50px;
  margin-left: 1%;
  position: absolute;
  background: lightskyblue;
  overflow: auto;
  opacity: 0.9;
}

.logForm {
  width: 90%;
  height: 90%;
  margin: -1% auto auto;
  /* display: flex;
     flex-flow: row wrap;
     align-items: center;
     justify-content: center;*/
}

.logInput {
  margin-top: 1%;

}

.logInput .el-input__inner {
  background: cornflowerblue;
  color: lime;
  outline: none;
  border: 1px ridge blue;
  border-radius: 0;
  font-size: 16px;

}

.logTextarea {
  margin-top: 1%;

}

.logTextarea .el-textarea__inner {
  background: steelblue;
  color: white;
  outline: none;
  border: 2px dotted lime;
  border-radius: 0;
  font-size: 15px
}

.formOperate {
  width: 100%;
  height: 3%;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  margin-top: 0.5%;

}

.formOperate button {
  color: green;
  width: 8%;
  height: 130%;
  border: dotted 1px snow;
  cursor: pointer;
}

.formOperate button:hover {
  color: white;
  border: solid 2px lightcyan;
}

.divNone {
  background: transparent;
  border: none;
  width: 10%;
}

.logManagePage {
  width: 48%;
  height: 80%;
  margin-top: 50px;
  margin-left: 51%;
  position: absolute;
  /*添加滚动条*/
  overflow: auto;
  opacity: 0.9;
}

</style>
